<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<div>
					<el-row :gutter="30">
						<el-col :span="17">
							<el-button type="primary" @click="addItem" color="#337ab7" style="margin-top:4px">
								<el-icon>
									<Plus />
								</el-icon>
								<span>添加</span>
							</el-button>
						</el-col>
					</el-row>
				</div>
			</el-header>
			<el-divider style="margin:0"></el-divider>
			<el-main>
				<el-tabs type="border-card" @tab-click="handleTabClick" v-model="queryParams.weekDay">
					<el-tab-pane v-for="(week, index) in weekdayList" :label="week" :name="week" :key="index">
						<div v-if="queryParams.weekDay == week">
							<el-row :gutter="20" class="row" v-if="queryParams.weekDay == week">
								<el-col :span="2" class="mealtype">
									<span>{{ changeType(1) }}早<br />餐</span>
								</el-col>
								<el-col v-for="(meal, index) in breakfastList" :key="meal.id" :span="4" class="food">
									<el-card :body-style="{ padding: '15px' }" class="card" shadow="hover">
										<el-tag class="ml-2 taste" v-if="meal.taste == '正常'" type="">{{ meal.taste
											}}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '多糖'" type="warning">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '少糖'" type="success">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '多盐'" type="warning">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '少盐'" type="success">{{
											meal.taste }}</el-tag>
										<el-icon class="edit" @click="edit(meal, 1)">
											<EditPen />
										</el-icon>
										<el-icon class="close" @click="del(meal.id, 1)">
											<Close />
										</el-icon>
										<img :src="foodFullImg(meal.foodImg)" class="image" />
										<div style="padding: 14px;">
											<el-row><el-col>类别：{{ meal.foodType }}</el-col></el-row>
											<el-row><el-col>名称：{{ meal.foodName }}</el-col></el-row>
											<el-row><el-col>价格：{{ meal.price }}元</el-col></el-row>
											<el-row><el-col>是否清真：
													<span v-if="meal.isHala">是</span>
													<span v-else>否</span>
												</el-col></el-row>
										</div>
									</el-card>
								</el-col>
							</el-row>
							<el-row :gutter="20" class="row" v-if="queryParams.weekDay == week">
								<el-col :span="2" class="mealtype">
									<span>{{ changeType(2) }}午<br />餐</span>
								</el-col>
								<el-col v-for="(meal, index) in lunchList" :key="meal.id" :span="4" class="food">
									<el-card :body-style="{ padding: '15px' }" class="card" shadow="hover">
										<el-tag class="ml-2 taste" v-if="meal.taste == '正常'" type="">{{ meal.taste
											}}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '多糖'" type="warning">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '少糖'" type="success">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '多盐'" type="warning">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '少盐'" type="success">{{
											meal.taste }}</el-tag>
										<el-icon class="edit" @click="edit(meal, 2)">
											<EditPen />
										</el-icon>
										<el-icon class="close" @click="del(meal.id, 2)">
											<Close />
										</el-icon>
										<img :src="foodFullImg(meal.foodImg)" class="image" />
										<div style="padding: 14px;">
											<el-row><el-col>类别：{{ meal.foodType }}</el-col></el-row>
											<el-row><el-col>名称：{{ meal.foodName }}</el-col></el-row>
											<el-row><el-col>价格：{{ meal.price }}元</el-col></el-row>
											<el-row><el-col>是否清真：
													<span v-if="meal.isHala">是</span>
													<span v-else>否</span>
												</el-col></el-row>
										</div>
									</el-card>
								</el-col>
							</el-row>
							<el-row :gutter="20" class="row" v-if="queryParams.weekDay == week">
								<el-col :span="2" class="mealtype">
									<span>{{ changeType(3) }}晚<br />餐</span>
								</el-col>
								<el-col v-for="(meal, index) in dinnerList" :key="meal.id" :span="4" class="food">
									<el-card :body-style="{ padding: '15px' }" class="card" shadow="hover">
										<el-tag class="ml-2 taste" v-if="meal.taste == '正常'" type="">{{ meal.taste
											}}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '多糖'" type="warning">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '少糖'" type="success">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '多盐'" type="warning">{{
											meal.taste }}</el-tag>
										<el-tag class="ml-2 taste" v-if="meal.taste == '少盐'" type="success">{{
											meal.taste }}</el-tag>
										<el-icon class="edit" @click="edit(meal, 3)">
											<EditPen />
										</el-icon>
										<el-icon class="close" @click="del(meal.id, 3)">
											<Close />
										</el-icon>
										<img :src="foodFullImg(meal.foodImg)" class="image" />
										<div style="padding: 14px;">
											<el-row><el-col>类别：{{ meal.foodType }}</el-col></el-row>
											<el-row><el-col>名称：{{ meal.foodName }}</el-col></el-row>
											<el-row><el-col>价格：{{ meal.price }}元</el-col></el-row>
											<el-row><el-col>是否清真：
													<span v-if="meal.isHala">是</span>
													<span v-else>否</span>
												</el-col></el-row>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</div>

					</el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
		<!-- 修改/添加对话框 -->
		<el-dialog v-model="dialog.dialogVisible" :title="dialog.tops" width="40%" align-center draggable
			:before-close="handleClose">
			<el-divider border-style="double" style="margin:0;" />
			<el-form label-position="right" label-width="auto" style="max-width:380px;margin:20px auto"
				class="demo-form-inline" ref="itemFormRef" :model="dialog.item" :rules="rules">
				<el-form-item label="膳食类型：" prop="mealType">
					<el-select v-model="dialog.item.mealType" style="width:320px" placeholder="餐饮类型：">
						<el-option v-for="item in mealtypeList" :key="item.typeId" :label="item.mealtypeName" :value="item.typeId" />
					</el-select>
				</el-form-item>
				<el-form-item label="食品名称：" prop="foodId">
					<el-select v-model="dialog.item.foodId" style="width:320px" placeholder="食品名称：">
						<el-option v-for="item in foodList" :key="item.id" :label="item.foodName" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="星期：" prop="weekDay">
					<el-select v-model="dialog.item.weekDay" style="width:320px" placeholder="星期：">
						<el-option value="周一" />
						<el-option value="周二" />
						<el-option value="周三" />
						<el-option value="周四" />
						<el-option value="周五" />
						<el-option value="周六" />
						<el-option value="周日" />
					</el-select>
				</el-form-item>
				<el-form-item label="口味：" prop="taste">
					<el-select v-model="dialog.item.taste" style="width:320px" placeholder="口味：">
						<el-option value="正常" />
						<el-option value="多糖" />
						<el-option value="少糖" />
						<el-option value="多盐" />
						<el-option value="少盐" />
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider border-style="double" style="margin:0;" />
			<template #footer>
				<span class="dialog-footer" style="padding-top: 0px">
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="cancel">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, EditPen, Close } from '@element-plus/icons-vue';
import {
	addMeal,
	updateMeal,
	delMeal,
	findMeal
} from "@/api/mealApi.js";
import { findFood } from "@/api/foodApi.js";

// 表单引用
const itemFormRef = ref(null);

// 响应式状态
const mealtypeList = ref([
	{ typeId: 1, mealtypeName: '早餐' }, 
	{ typeId: 2, mealtypeName: '午餐' }, 
	{ typeId: 3, mealtypeName: '晚餐' }
]);
const weekdayList = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
const currentDate = ref('1997-7-7');
const breakfastList = ref([]);
const lunchList = ref([]);
const dinnerList = ref([]);
const foodList = ref([]);
const mealList = ref([]);
const btnFlag = ref(true);
const path = ref('');
const hasFood = ref(true);

// 查询参数
const queryParams = reactive({
	mealType: 1,
	weekDay: "周一",
	pageSize: "1" // 默认第一页
});

// 模态框数据
const dialog = reactive({
	dialogVisible: false, // 模态框状态
	tops: "", // 模态框标题,
	item: {
		id: "",
		foodId: "",
		foodName: "",
		foodType: "",
		price: "",
		isHalal: "",
		weekDay: "",
		mealType: "",
		taste: "",
		isDeleted: 0
	}
});

// 校验规则
const rules = reactive({
	// 可以根据需要添加校验规则
});

// 监听weekDay变化
watch(() => queryParams.weekDay, (newVal, oldVal) => {
	console.log(newVal);
	getMealList(1);
	getMealList(2);
	getMealList(3);
});

// 获取食品完整图片路径
const foodFullImg = (foodImg) => {
	return 'http://localhost:9999/yyzx/images/' + foodImg;
};

// 查询方法
const query = () => {
	// 实现查询逻辑
};

// 编辑膳食
const edit = (meal, mealType) => {
	dialog.tops = "修改膳食日历";
	dialog.dialogVisible = true;
	// 初始化模态框数据
	nextTick(() => {
		dialog.item.id = meal.id;
		dialog.item.foodName = meal.foodName;
		dialog.item.foodType = meal.foodType;
		dialog.item.price = meal.price;
		dialog.item.isHalal = meal.isHalal;
		dialog.item.weekDay = meal.weekDay;
		dialog.item.mealType = mealType;
		dialog.item.taste = meal.taste;
	});
};

// 点击添加按钮
const addItem = () => {
	dialog.tops = "添加膳食管理";
	dialog.dialogVisible = true;
	getFoodList();
};

// 对话框关闭处理
const handleClose = () => {
	dialog.dialogVisible = false;
	resetForm(); // 重置表单
};

// 取消操作
const cancel = () => {
	handleClose();
};

// 重置表单
const resetForm = () => {
	if (itemFormRef.value) {
		itemFormRef.value.resetFields();
	}
};

// 保存膳食信息
const save = () => {
	itemFormRef.value.validate(valid => {
		if (valid) {
			// 通过id判断是添加还是编辑
			if (!dialog.item.id) {
				addMeal(dialog.item).then(res => {
					if (res.flag) {
						ElMessage.success(res.message);
						console.log(dialog.item);
						getMealList(dialog.item.mealType);
						handleClose(); // 关闭模态框
					} else {
						ElMessage.error(res.message);
					}
				});
			} else {
				updateMeal(dialog.item).then(res => {
					if (res.flag) {
						ElMessage.success(res.message);
						console.log(dialog.item);
						// 刷新数据表格
						getMealList(dialog.item.mealType);
						handleClose(); // 关闭模态框
					} else {
						ElMessage.error(res.message);
					}
				});
			}
		} else {
			return false;
		}
	});
};

// 删除膳食
const del = (id, mealtype) => {
	ElMessageBox.confirm("此操作删除记录, 是否继续?", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning"
	})
		.then(() => {
			delMeal({ id: id }).then(res => {
				if (res.flag) {
					ElMessage.success(res.message);
					// 重载表格
					console.log("餐饮类型" + mealtype);
					getMealList(mealtype);
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => { });
};

// 获取膳食列表
const getMealList = async (typeId) => {
	queryParams.mealType = typeId;
	await findMeal(queryParams).then(res => {
		if (typeId == 1) {
			breakfastList.value = res.data.records;
		} else if (typeId == 2) {
			lunchList.value = res.data.records;
		} else {
			dinnerList.value = res.data.records;
		}
	});
};

// 获取食品列表
const getFoodList = () => {
	findFood().then(res => {
		foodList.value = res;
	});
};

// 处理标签页点击
const handleTabClick = (tab, event) => {
	console.log(weekdayList.value[tab.index]);
	queryParams.weekDay = weekdayList.value[tab.index];
	breakfastList.value = null;
	lunchList.value = null;
	dinnerList.value = null;
};

// 切换膳食类型
const changeType = (typeId) => {
	queryParams.mealType = typeId;
	return '';
};

// 页面加载时获取数据
onMounted(() => {
	getFoodList();
	getMealList(1);
	getMealList(2);
	getMealList(3);
});
</script>

<style scoped>
.activeBtn {
	color: #1890ff;
	background: rgb(232, 244, 255);
}

.time {
	font-size: 12px;
	color: #999;
}

.bottom {
	margin-top: 13px;
	line-height: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.button {
	padding: 0;
	min-height: auto;
}

.card {
	height: 80%;
	position: relative;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.image {
	width: 100%;
	display: block;
	width: 160px;
	height: 160px;
	margin-top: 20px;
}

.edit {
	position: absolute;
	right: 20px;
	top: 5px;
	font-size: 20px;
}

.close {
	position: absolute;
	right: 5px;
	top: 5px;
	font-size: 20px;
}

.taste {
	position: absolute;
	left: 5px;
	top: 5px;
}

.row {
	border: 1px solid #eee;
	margin-top: 20px;
	box-shadow: 5px 5px #eee;
	height: 300px;
}

.mealtype {
	color: #fff;
	background-color: #337ab7;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
}

.food {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}

.nofood {
	width: 400px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>